<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./plugins/M_select/M_select.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="header">
        <a href="admin_index.html">运营管理 </a>
        <h3>泽州县应急指挥系统</h3>
    </div>
    <div class="main-box">
        <div class="map-box" id="map-container"></div>
        <!-- 右上角三个按钮   事件报警 应急预案 全屏 -->
        <ul class="map-btn-list">
            <li>
                <a href="javascript:;">
                    <img class="map-btn" src="./images/icon-alarm.png" alt="事件报警">
                    <img class="map-btn-active" src="./images/icon-alarm-hover.png" alt="事件报警">
                </a>
                <div class="map-btn-pop alarm-box">
                    <div class="pop-content">
                        <div class="pop-title">
                            <h3>事件报警</h3>
                            <a href="javascript:;" class="pop-close"><img src="./images/close-white.png" alt=""></a>
                        </div>
                        <div class="pop-tab">
                            <a href="javascript:;" class="active">待接警</a>
                            <a href="javascript:;">处理中</a>
                            <a href="javascript:;">已完成</a>
                        </div>
                        <div class="pop-tab-content">
                            <ul class="scroll-bar">
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>山里泉</span>
                                    <span>事故灾难</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>大阳古镇</span>
                                    <span>突发公共卫生</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>可寒山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                            </ul>
                            <ul class="hd scroll-bar">
                                <li>
                                    <span>2珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                            </ul>
                            <ul class="hd scroll-bar">
                                <li>
                                    <span>3珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                                <li>
                                    <span>珏山</span>
                                    <span>自然灾害</span>
                                    <i class="time">2020/07/16 12：07</i>
                                    <a href="javascript:;">查看</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 详情 -->
                    <div class="pop-content-detail">
                        <div class="pop-title">
                            <h3>珏山突发自然灾害</h3>
                            <a href="javascript:;" class="pop-back">
                                <返回</a> </div> <p class="detail-leval">等级:黄色</p>
                                    <div class="detail-content scroll-bar">
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                    </div>
                        </div>
                    </div>
            </li>
            <li>
                <a href="javascript:;">
                    <img class="map-btn" src="./images/icon-emergency.png" alt="应急预案">
                    <img class="map-btn-active" src="./images/icon-emergency-hover.png" alt="应急预案">
                </a>
                <div class="map-btn-pop emergency-box">
                    <div class="pop-content">
                        <div class="pop-title">
                            <h3>事件报警</h3>
                            <a href="javascript:;" class="pop-close"><img src="./images/close-white.png" alt=""></a>
                        </div>
                        <div class="pop-tab">
                            <a href="javascript:;" class="active">自然灾害</a>
                            <a href="javascript:;">事故灾难</a>
                            <a href="javascript:;">公共卫生</a>
                            <a href="javascript:;">旅游设施事故</a>
                        </div>
                        <div class="pop-tab-content">
                            <ul class="scroll-bar">
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案自然灾害防范预警实施方案自然灾害防范预警实施方案自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                            </ul>
                            <ul class="scroll-bar hd">
                                <li>
                                    <span>2自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案自然灾害防范预警实施方案自然灾害防范预警实施方案自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                            </ul>
                            <ul class="scroll-bar hd">
                                <li>
                                    <span>3自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案自然灾害防范预警实施方案自然灾害防范预警实施方案自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                            </ul>
                            <ul class="scroll-bar hd">
                                <li>
                                    <span>4自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案自然灾害防范预警实施方案自然灾害防范预警实施方案自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                                <li>
                                    <span>自然灾害防范预警实施方案</span>
                                    <em>等级:橙色</em>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 详情 -->
                    <div class="pop-content-detail">
                        <div class="pop-title">
                            <h3>珏山突发自然灾害</h3>
                            <a href="javascript:;" class="pop-back">
                                <返回</a> </div> <p class="detail-leval">等级:黄色</p>
                                    <div class="detail-content scroll-bar">
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                        珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害珏山突发自然灾害
                                    </div>
                        </div>
                    </div>
            </li>
            <li id="inFull">
                <a href="javascript:;">
                    <img class="map-btn" src="./images/icon-screenfull.png" alt="进入全屏">
                    <img class="map-btn-active" src="./images/icon-screenfull-hover.png" alt="进入全屏">
                </a>
            </li>
            <li id="outFull">
                <a href="javascript:;">
                    <img class="map-btn" src="./images/icon-screen.png" alt="退出全屏">
                    <img class="map-btn-active" src="./images/icon-screen-hover.png" alt="退出全屏">
                </a>
            </li>

        </ul>
        <!-- 事件报警弹窗 -->



        <!--待接警-->
        <div class="map-prop map-prop-wait">
            <a href="javascript:;" class="close-btn"><img src="./images/close.png" alt=""></a>
            <h3 class="prop-title">事件报警<span>(待接警)</span></h3>
            <p>上报时间:2020/01/16 12:23</p>
            <p>上报单位:珏山风景区</p>
            <p>上报人电话:15837569852</p>
            <p>事件类型:自然灾害</p>
            <p>位置:珏山风景区森林氧吧</p>
            <p>上报描述:珏山森林氧吧失火，请求协助</p>
            <div class="btn-list">
                <a href="javascript:;" id="monitor-btn">视频监控</a>
                <a href="javascript:;" id="supplies-btn">应急物资</a>
                <a href="javascript:;" id="task-btn">接警</a>
                <a href="javascript:;" id="invalid-btn">无效报警</a>
                <a href="javascript:;" id="repeat-btn">重复报警</a>
            </div>
        </div>
        <!--接警-->
        <div class="task-prop jiejing-box">
            <a href="javascript:;" class="close-btn"><img src="./images/close.png" alt=""></a>
            <h3>接警</h3>
            <ul>
                <li class="task-item">
                    <label>事件判定</label>
                    <div class="item-content">
                        <div class="select-box">
                            <select name="" id="event-type" class="event">
                                <option value="0">自然灾害</option>
                                <option value="1">突然公共卫生事件</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="task-item align-top">
                    <label>应急预案</label>
                    <div class="item-content">
                        <ul class="result-box">
                            <!-- <li>
                                 <p>自然灾害防范预警实施方案</p>
                                <a href="javascript:;" class="del-btn">
                                    <img src="./images/icon-del.png" alt="">
                                </a>
                            </li> -->
                           
                        </ul>
                        <a href="javascript:;" class="add-btn">+选择应急预案</a>
                        <div class="choose-box plan">
                            <div class="check-list-box">
                                <label class="check-list-item">
                                    <input type="checkbox">
                                    <i></i>
                                    <span>1自然灾害防范预警实施方案</span>
                                </label>
                                <label class="check-list-item">
                                    <input type="checkbox">
                                    <i></i>
                                    <span>2自然灾害防范预警实施方案</span>
                                </label>
                                <label class="check-list-item">
                                    <input type="checkbox">
                                    <i></i>
                                    <span>3自然灾害防范预警实施方案</span>
                                </label>
                               
                            </div>
                            <div class="btn-list">
                                <a href="javascript:;" class="confirm-btn">确定</a>
                                <a href="javascript:;" class="cancel-btn">取消</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="task-item align-top">
                    <label>应急物资</label>
                    <div class="item-content">
                        <ul class="result-box">
                            <!-- <li>
                                 <p>自然灾害防范预警实施方案</p>
                                <a href="javascript:;" class="del-btn">
                                    <img src="./images/icon-del.png" alt="">
                                </a>
                            </li> -->
                            
                        </ul>
                        <a href="javascript:;" class="add-btn">+选择应急物资</a>
                        <div class="choose-box supplies-box">
                            <div class="select-box">
                                <select name="" id="supplies-type" class="supplies">
                                    <option value="0">医疗队伍</option>
                                    <option value="1">物资储备</option>
                                    <option value="1">设备救援</option>
                                    <option value="1">交通运输</option>
                                    <option value="1">通信保障</option>
                                    <option value="1">医疗救护</option>
                                </select>
                            </div>
                            <div class="check-list-box">
                                <label class="check-list-item">
                                    <input type="checkbox">
                                    <i></i>
                                    <span>医疗物资 张明13658952458</span>
                                </label>
                                <label class="check-list-item">
                                    <input type="checkbox">
                                    <i></i>
                                    <span>120救护车 张明15685269954</span>
                                </label>
                            </div>
                            <div class="btn-list">
                                <a href="javascript:;" class="confirm-btn">确定</a>
                                <a href="javascript:;" class="cancel-btn">取消</a>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="task-item align-top">
                    <label>值守人员</label>
                    <div class="item-content">
                        <ul class="result-box">
                            <!-- <li>
                                <p>安全组-张明15256258455</p>
                            <a href="javascript:;" class="del-btn">
                                <img src="./images/icon-del.png" alt="">
                            </a>
                            </li> -->
                            
                        </ul>
                        <a href="javascript:;" class="add-btn">+添加值守人员</a>
                        <div class="choose-box watch-box">
                            <div class="select-box">
                                <select name="" id="watch-type" class="watch">
                                    <option value="0">安全部</option>
                                    <option value="1">珏山风景区</option>
                                    <option value="1">大阳古镇</option>
                                </select>
                            </div>
                            <div class="check-list-box">
                                <label class="check-list-item">
                                    <input type="checkbox">
                                    <i></i>
                                    <span>张明15256258455</span>
                                </label>
                                <label class="check-list-item">
                                    <input type="checkbox">
                                    <i></i>
                                    <span>李白15689524587</span>
                                </label>
                            </div>
                            <div class="btn-list">
                                <a href="javascript:;" class="confirm-btn">确定</a>
                                <a href="javascript:;" class="cancel-btn">取消</a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <button>任务下发</button>
        </div>
        <!-- 指挥调度 -->
        <div class="task-prop zhihui-box">
            <a href="javascript:;" class="close-btn"><img src="./images/close.png" alt=""></a>
            <h3>指挥调度</h3>
           <ul>
            <li class="task-item align-top">
                <label>应急预案</label>
                <div class="item-content">
                    <ul class="result-box">
                        <!-- <li>
                             <p>自然灾害防范预警实施方案</p>
                             <a href="javascript:;" class="del-btn">
                                <img src="./images/icon-del.png" alt="">
                            </a>
                        </li> -->
                       
                    </ul>
                    <a href="javascript:;" class="add-btn">+选择应急预案</a>
                    <div class="choose-box plan">
                        <div class="check-list-box">
                            <label class="check-list-item">
                                <input type="checkbox">
                                <i></i>
                                <span>1自然灾害防范预警实施方案</span>
                            </label>
                            <label class="check-list-item">
                                <input type="checkbox">
                                <i></i>
                                <span>2自然灾害防范预警实施方案</span>
                            </label>
                            <label class="check-list-item">
                                <input type="checkbox">
                                <i></i>
                                <span>3自然灾害防范预警实施方案</span>
                            </label>
                           
                        </div>
                        <div class="btn-list">
                            <a href="javascript:;" class="confirm-btn">确定</a>
                            <a href="javascript:;" class="cancel-btn">取消</a>
                        </div>
                    </div>
                    
                </div>
            </li>
            <li class="task-item align-top">
                <label>应急物资</label>
                <div class="item-content">
                    <ul class="result-box">
                       <!-- <li>
                            <p>自然灾害防范预警实施方案</p>
                            <a href="javascript:;" class="del-btn">
                            <img src="./images/icon-del.png" alt="">
                        </a>
                       </li> -->
                    </ul>
                    <a href="javascript:;" class="add-btn">+选择应急物资</a>
                    <div class="choose-box supplies-box">
                        <div class="select-box">
                            <select name="" id="supplies-type" class="supplies">
                                <option value="0">医疗队伍</option>
                                <option value="1">物资储备</option>
                                <option value="1">设备救援</option>
                                <option value="1">交通运输</option>
                                <option value="1">通信保障</option>
                                <option value="1">医疗救护</option>
                            </select>
                        </div>
                        <div class="check-list-box">
                            <label class="check-list-item">
                                <input type="checkbox">
                                <i></i>
                                <span>医疗物资 张明13658952458</span>
                            </label>
                            <label class="check-list-item">
                                <input type="checkbox">
                                <i></i>
                                <span>120救护车 张明15685269954</span>
                            </label>
                        </div>
                        <div class="btn-list">
                            <a href="javascript:;" class="confirm-btn">确定</a>
                            <a href="javascript:;" class="cancel-btn">取消</a>
                        </div>
                    </div>
                </div>
            </li>
            <li class="task-item align-top">
                <label>值守人员</label>
                <div class="item-content">
                    <ul class="result-box">
                        <!-- <li>
                            <p>安全组-张明15256258455</p>
                            <a href="javascript:;" class="del-btn">
                                <img src="./images/icon-del.png" alt="">
                            </a>
                        </li> -->
                    </ul>
                    <a href="javascript:;" class="add-btn">+添加值守人员</a>
                    <div class="choose-box watch-box">
                        <div class="select-box">
                            <select name="" id="watch-type" class="watch">
                                <option value="0">安全部</option>
                                <option value="1">珏山风景区</option>
                                <option value="1">大阳古镇</option>
                            </select>
                        </div>
                        <div class="check-list-box">
                            <label class="check-list-item">
                                <input type="checkbox">
                                <i></i>
                                <span>张明15256258455</span>
                            </label>
                            <label class="check-list-item">
                                <input type="checkbox">
                                <i></i>
                                <span>李白15689524587</span>
                            </label>
                        </div>
                        <div class="btn-list">
                            <a href="javascript:;" class="confirm-btn">确定</a>
                            <a href="javascript:;" class="cancel-btn">取消</a>
                        </div>
                    </div>
                </div>
            </li>
           </ul>
            <button>任务下发</button>
        </div>
        <!--处理中-->
        <div class="map-prop map-prop-doing">
            <a href="javascript:;" class="close-btn"><img src="./images/close.png" alt=""></a>
            <h3 class="prop-title">事件报警<span>(处理中)</span></h3>
            <p>上报时间:2020/01/16 12:23</>
                <p>上报单位:珏山风景区</p>
                <p>上报人电话:15837569852</p>
                <p>事件类型:自然灾害</p>
                <p>位置:珏山风景区森林氧吧</p>
                <p>上报描述:珏山森林氧吧失火，请求协助</p>
                <hr>
                <p>应急预案:自然灾害防范预警实施方案</p>
                <p>值守人员</p>
                <p>安全组-张明 15868543258</p>
                <p>接警时间:2020/01/16 12:25</p>
                <p>消防组-李斯 15868543258</p>
                <p>接警时间:2020/01/16 12:25</p>
                <div class="btn-list">
                    <a href="javascript:;" id="monitor-btn1">视频监控</a>
                    <a href="javascript:;" id="supplies-btn1">应急物资</a>
                    <a href="javascript:;" id="zhihui-btn">指挥调度</a>
                    <a href="javascript:;" id="line-btn">现场连线</a>
                    <a href="javascript:;" id="comp-btn">处理完成</a>
                </div>
        </div>
        <!--视频连线-->
        <div class="line-monitor">
            <a href="javascript:;" class="close-btn"><img src="./images/close-white.png" alt=""></a>
            <div class="title">
                <h3>张明</h3>
                <p>连线中...</p>
            </div>
            <div class="bottom-box">
                <div>
                    <a href="javascript:;"><img src="./images/jingyin.png" alt=""><span>静音</span></a>
                    <a href="javascript:;"><img src="./images/qiehuan.png" alt=""
                            id="change-line"><span>切换到语音聊天</span></a>
                    <a href="javascript:;"><img src="./images/yinliang.png" alt=""><span>音量</span></a>
                </div>
                <a href="javascript:;" class="guaduan"><img src="./images/guaduan.png" alt=""></a>
            </div>
        </div>
        <!--语音连线-->
        <div class="line-audio">
            <a href="javascript:;" class="close-btn"><img src="./images/close-white.png" alt=""></a>
            <div class="title">
                <h3>张明</h3>
                <img src="./images/circle.png" alt="">
            </div>
            <div class="bottom-box">
                <a href="javascript:;" class="guaduan"><img src="./images/guaduan.png" alt=""></a>
            </div>
        </div>
    </div>
    <script src="./plugins/jquery-3.4.1.min.js"></script>
    <script src="./plugins/M_select/M_select.js"></script>
    <script src="./plugins/layer/layer.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY">
    </script>
    <script src="./js/index.js"></script>
</body>

</html>